<template>
    <notice :notice.sync="notice"></notice>
    <header-class action="testPapers"></header-class>
    
    <div class="loading-class" v-if="loading">
        <i class="fa fa-spinner fa-spin fa-3x"></i>
    </div>
    <div class="container" id="grade-container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="release" v-show="!adding">
                    <a href="javasript:;" @click="adding=true"><span class="glyphicon glyphicon-edit"></span> 发布测试</a>
                </div>
                <div class="panel panel-default" id="release-box" v-show="adding">
                    <div class="panel-body">
                        <validator name="add">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">测试名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control quiz-name"placeholder="测试名称" 
                                        v-model="newPaper.name"
                                        v-validate:name="{
                                            required: {rule: true, message: '请输入测试名称'}
                                        }">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">测试简介</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control quiz-remark" rows="3" 
                                        v-model="newPaper.remark"> </textarea>
                                </div>
                            </div>
                        </form>
                        </validator>
                    </div>
                    <div class="panel-footer">
                        <button class="btn btn-default btn-import-quiz" data-toggle="modal" data-target="#import-paper">从其他班级导入</button>
                        <button class="btn btn-primary pull-right btn-add-quiz" @click="addPaper">确定</button>
                        <button class="btn btn-default pull-right" id="btn-release-cancel" @click="cancelAdd">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-10 col-md-offset-1 display-hint" v-if="papers.length==0&&!loading">
            <p>点击上方按钮可以发布测试。</p>
        </div>
        <div class="row" v-for="paper in papers" v-if="papers.length!=0&&!loading">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default quiz-box" v-if="!paper.editing">
                    <div class="panel-body">
                        <div class="box-title">
                            <span class="text-muted">{{paper.qus_create_time}}</span>
                            <div class="dropdown pull-right">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" aria-haspopup="true" aria-expanded="true">
                                    <span class="glyphicon glyphicon-option-vertical"></span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:;" class="menu-edit-quiz" @click="beforeEdit($index)">编辑标题和简介</a></li>
                                    <li><a :href="'/TestPaper/testPaper.html?qd='+paper.qus_id">编辑试题内容</a></li>
                                    <li><a href="javascript:;" class="menu-delete-quiz" @click="beforeDel($index)">删除</a></li>
                                </ul>
                            </div>
                            <p class="pull-right">
                                <span v-if="paper.qus_status==0">未使用</span>
                                <span v-if="paper.qus_status==1">已发布</span>
                                <span v-if="paper.qus_status==2">已结束</span>
                            </p>
                        </div>
                        <div class="box-body clearfix">
                            <div class="box-body-left pull-left">
                                <h4><a :href="'/TestPaper/testPaper.html?qd='+paper.qus_id">{{paper.qus_name}}</a></h4>
                                <p>{{paper.qus_remark}}</p>
                            </div>
                            <div class="box-body-right pull-right">
                                <p class="pull-right">
                                    <a :href="paper.qus_status==2?'/Grade/grade.html?cad='+claId:'###'">{{paper.lackNum}}</a>
                                    <span class="text-danger">未交</span>
                                </p>
                                <p class="pull-right" v-if="paper.qus_status==1">
                                    <a href="###">{{paper.commitNum}}</a>
                                    <span class="text-primary">已交</span>
                                </p>
                                <p class="pull-right" v-if="paper.qus_status==2">
                                    <a :href="'/QuizResult/analyze?qd='+paper.qus_id">{{paper.passNum}}</a>
                                    <span class="text-primary">及格</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default edit-box" v-else>
                    <div class="panel-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">测试名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" placeholder="测试名称" 
                                    v-model="editedPaper.qus_name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">测试简介</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control edit-quiz-remark" rows="3" v-model="editedPaper.qus_remark" > </textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="panel-footer">
                        <button class="btn btn-primary pull-right btn-edit-quiz" @click="edit">确定</button>
                        <button class="btn btn-default pull-right btn-edit-cancel" @click="paper.editing=false">取消</button>
                        <div style="clear:right"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" v-if="!loading">
                <div class="col-md-3 col-md-offset-5">
                    <pagenation v-if="pageInfo.page>1"
                                :page-info="pageInfo"
                                @update-np="getPapes">
                    </pagenation>
                </div>
        </div>
    </div>
    <modal id="import-paper" class="import-paper-modal" type="modal-lg">
        <h4 slot="header" class="modal-title">导入试卷</h4>
        <template slot="body">
            <div class="row">
                <div class="col-md-3 col-md-offset-9">
                    <select class="form-control choose-course input-sm" @change="reloadImportPaper" v-model="selectedClass">
                        <option value="-1">选择一个班级</option>
                        <option v-for="cla in classes" :value="cla.cla_id">{{ cla.cla_name }}</option>
                    </select>
                </div>
            </div>
            <div class="row other-panels">
                <template v-for="paper in otherPapers" v-if="otherPapers.length>0">
                    <div class="col-md-4" @click="selectedPaper=$index">
                        <div class="panel panel-default">
                            <div class="panel-heading" :class="{'active': selectedPaper==$index}">
                                <span class="glyphicon glyphicon-check"></span>
                                <h4>{{ paper.qus_name }}</h4>
                                <p>{{ paper.qus_remark }}</p>
                            </div>
                        </div>
                    </div>
                </template>
                <div class="well col-md-12" v-if="otherPapers.length<=0">
                    点击右上角选择一个班级
                </div>
            </div>
        </template>
        <button slot="footer" type="button" class="btn btn-primary" @click="importPaper">导入</button>
    </modal>
    <modal type="modal-sm" id="del-paper">
        <h4 slot="header" class="modal-title text-danger">删除试卷</h4>
        <p slot="body">确定删除试卷 '<span class="text-info">{{papers[delIndex]&&papers[delIndex].qus_name}}</span>' 吗</p>
        <button slot="footer" type="button" class="btn btn-danger" @click="del()">删除</button>
    </modal>
</template>

<script>
    import HeaderClass from '../../Component/HeaderClass/HeaderClass';
    import Pagenation from '../../Component/Pagenation/Pagenation';
    import Notice from '../../Component/Notice/Notice';
    import Modal from '../../Component/Modal/Modal';

    export default {
        created: function() {
            this.claId = location.search.substring(1).split("=")[1];
            this.getPapes();
            this.getClasses();
        },
        data() {
            return {
                claId: -1,
                notice: {type: 0, msg: ""},
                loading: false,
                adding: false,
                papers: [],
                newPaper: {},
                editedPaper: {},
                classes: [],
                otherPapers: [],
                selectedClass: -1,
                selectedPaper: -1,
                delIndex: -1,
                pageInfo: {}
            }
        },
        components: {
            HeaderClass,
            Pagenation,
            Notice,
            Modal
        },
        methods: {
            getPapes: function(np) {
                this.loading = true;
                this.$http.post('/questionSet/quiz', {cla_id: this.claId, np: np||1}).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.papers = resp.data.data.quiz.map((el) => {
                            el['editing'] = false;
                            return el;
                        })
                        this.pageInfo = resp.data.data.pageInfo;
                    }
                    this.loading = false;
                }, function(resp) {
                    // error callback
                    this.loading = false;
                    this.notice = {type: 0, msg: resp.statusText};
                })
            },
            getClasses: function() {
                this.$http.post('/Class/otherClass', {cla_id: this.claId, cou_id: 1}).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.classes = resp.data.data;
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            },
            addPaper: function() {
                var byImport = !!this.newPaper.importId, // importId在选择导入试卷后添加
                    url = byImport? '/questionSet/import' : '/questionSet/add',
                    postData = {class_cla_id: this.claId, qus_name: this.newPaper.name, qus_remark: this.newPaper.remark};

                if (byImport) postData['qus_id'] = this.newPaper.importId;
                if (!this.$add.errors) {
                    this.$http.post(url, postData).then(function(resp) {
                        if (resp.data.status === 1) {
                            this.notice = {type: 1, msg: resp.data.message};
                            this.adding = false;
                            this.getPapes();
                            this.newPaper = {};
                        } else {
                            this.notice = {type: 0, msg: resp.data.message};
                        }
                    }, function(resp) {
                        // error callback
                        this.notice = {type: 0, msg: resp.statusText};
                    })
                } else {
                    this.notice = {type: 0, msg: this.$add.errors[0].message};
                }
                
            },
            cancelAdd: function() {
                this.adding = false;
                this.newPaper = {};
            },
            reloadImportPaper: function() {
                if (this.selectedClass == -1) return;
                this.selectedPaper = -1;
                this.$http.post('/questionSet/getOtherClassQuiz', {cla_id: this.selectedClass}).then(function(resp) {
                    if (resp.data.status === 1) {
                        if (resp.data.data) {
                            this.otherPapers = resp.data.data;
                        } else {
                            this.otherPapers = [];
                            this.notice = {type: 0, msg: '该班级没有试卷'};
                        }
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            },
            importPaper: function() {
                if (this.selectedPaper === -1) {
                    this.notice = {type: 0, msg: '请选择一个试卷'};
                    return;
                }
                var selected = this.otherPapers[this.selectedPaper];
                this.newPaper = {name: selected.qus_name, 
                                remark: selected.qus_remark,
                                importId: selected.qus_id};
                $('#import-paper').modal("toggle");
            },
            beforeEdit: function(index) {
                this.editedPaper = Object.assign({}, this.papers[index]);
                this.papers[index].editing = true;
            },
            edit: function() {
                if (this.editedPaper.qus_name) {
                    var postData = {qus_id: this.editedPaper.qus_id,
                                    qus_name: this.editedPaper.qus_name,
                                    qus_remark: this.editedPaper.qus_remark};
                    this.$http.post('/questionSet/update', postData).then(function(resp) {
                        if (resp.data.status === 1) {
                            this.papers.forEach((value, index, arr) => {
                                if (value.qus_id === this.editedPaper.qus_id) {
                                    this.papers.$set(index, this.editedPaper);
                                    //this.papers[index].editing = false;
                                }
                            })
                            this.editedPaper = {};
                            this.notice = {type: 1, msg: resp.data.message};
                        } else {
                            this.notice = {type: 0, msg: resp.data.message};
                        }
                    }, function(resp) {
                        // error callback
                        this.notice = {type: 0, msg: resp.statusText};
                    })
                } else {
                    this.notice = {type: 0, msg: '请输入测试名称'};
                }
            },
            beforeDel: function(index) {
                this.$http.post('/questionSet/checkDelete', {qus_id: this.papers[index].qus_id}).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.delIndex = index;
                        $('#del-paper').modal('toggle');
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            },
            del: function() {
                this.$http.post('/questionSet/delete', {qus_id: this.papers[this.delIndex].qus_id}).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.notice = {type: 1, msg: '删除试卷成功'};
                        this.papers.splice(this.delIndex, 1);
                        $('#del-paper').modal('toggle');
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            }
        }
    }
</script>

<style>
 .container {
    margin-bottom: 60px;
}

.release {
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ecf0f1;
    margin-bottom: 40px;
}

.release a{
    display: block;
    color: #808080;
    margin-left: 30px;
    cursor: text;
}

.release a:hover, 
.release a:focus {
    text-decoration: none;
}

#release-box .panel-body,
.edit-box .panel-body {
    padding: 20px 70px 0 0;
}

#release-box .panel-footer,
.edit-box .panel-footer {
    padding: 20px 60px;
}

#release-box .panel-footer .btn,
.edit-box .panel-footer .btn{
    margin-right: 10px;
}

.quiz-box {
    margin-bottom: 40px;
}

.quiz-box .panel-body{
    padding: 20px 30px 30px;
}

.quiz-box .box-title .dropdown-toggle{
    color: #808080;
    margin-left: 15px;
}

.quiz-box .box-title {
    padding: 0 10px 20px 0;
}

.quiz-box .box-body-left h4 {
    margin-bottom: 20px;
}

.quiz-box .box-body-left a{
    color: #202020;
}

.quiz-box .box-body-right p {
    padding-left: 15px;
    border-left: 1px solid #c0c0c0;
    margin: 10px 30px 0 0;
}

.quiz-box .box-body-right span{
    display: block;
}

.quiz-box .box-body-right p a:first-child {
    color: #000;
    font-size: 30px;
}

.quiz-box .box-body-right p a:hover,
.quiz-box .box-body-right p a:active {
    text-decoration: none;
    color: #843534;
}

.import-paper-modal .modal-body{
    padding: 20px 40px 0 40px;
}

.import-paper-modal .modal-body p, h4{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.import-paper-modal .other-panels {
    padding-top: 15px;
}

.import-paper-modal .modal-body {
    height: 310px;
    overflow-y: auto;
}

.import-paper-modal .panel .panel-heading {
    border: 1px solid transparent;
    min-height: 94px;
    cursor: pointer
}

.import-paper-modal .panel-heading:hover {
    color: #123456;
    opacity: 0.6;
}

.import-paper-modal .panel-heading span {
    position: absolute;
    top: 6px;
    right: 20px;
    display: none;
    margin-bottom: -5px;
}

.import-paper-modal .panel-heading:hover span {
    display: block;
}

.import-paper-modal .panel .panel-heading.active span {
    display: block;
    color: #18bc9c;
}

.import-paper-modal .panel .panel-heading.active {
    border-color: #18bc9c;
}
</style>